<template>
   <div>
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" show-word-limit :rows="2" type="textarea"  size="default" />
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input v-model="_value" clearable :maxlength="255" :placeholder="placeholder" show-word-limit :rows="3" type="textarea" size="default">
        <template #append v-if="enableScan">
          <el-button v-if="enableScan" :icon="FullScreen" @click="scanCode"></el-button>
        </template>
      </el-input>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field v-model="_value" rows="2" autosize type="textarea" maxlength="2048" :placeholder="placeholder" show-word-limit>
        <template #right-icon v-if="enableScan">
          <el-icon @click="scanCode"><FullScreen /></el-icon>
        </template>
      </field>
      <scan-code v-model="visible" @ok="scanOk"></scan-code>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script>
import { Field, showSuccessToast } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import ScanCode from '/@/views/setting/workflow/common/ScanCode.vue'
import { computed, reactive, toRefs } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'
export default {
    name: 'TextareaInput',
    mixins: [componentMinxins],
    components: { Field, ScanCode, FullScreen },
    props: {
        modelValue: {
            type: String,
            default: null,
        },
        placeholder: {
            type: String,
            default: '请输入内容',
        },
        enableScan: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const { modelValue } = toRefs(props)
        const state = reactive({
            visible: false,
            popupStyle: {
                height: '100%',
                width: '100%',
                background: 'black',
                opacity: '0.5',
            },
        })
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        }) 
        const scanCode = () => {
            state.visible = true
        }
        const scanOk = (code) => {
            _value.value += code + '\n'
            showSuccessToast('扫码成功') 
        }
        return {
            ...toRefs(state),
            _value,
            scanOk,
            scanCode,
            FullScreen
        }
    }
}
</script>

<style>

</style>